<template>
  <div class="form">
    <div class="Header">
      <div class="icon">
        <img src="@/assets/images/book.svg" alt="">
        <span>我们一起背单词吧！</span>
      </div>
      <RouterLink to="/" class="floatR">
        <i class="iconfont">&#xe7c6;</i>
      </RouterLink>

      <div class="floatR" @click="prev()"><i class="iconfont">&#xe81a;</i></div>
    </div>
    <div class="title">
      词书名称：<span> {{listmsg.titlename}}</span>
      <div v-if="usermsg.user_day!==null" class="congratulations" >
      </div>
      <div v-else style="float:right; margin-right:8px; color: ">
        还没有通关过哦
      </div>
    </div>
    <div class="prompt">
      <div class="message">
        <!-- 基本信息 -->
        <div class="plan">
          <!-- 计划 -->
            <div class="planmsg">该词表共 <span>{{ listmsg.wordnum }} </span> 词 <span>{{ listmsg.coursenum }}</span> 课</div>
            <div class="planmsg success" v-if="usermsg.user_day!==null"><i class="iconfont">&#xe6fc;</i> <span>您已于{{day(usermsg.user_day).format("YYYY-MM-DD")}}日通关过这本词书</span> </div>
            <div class="planmsg warn" v-else-if="usermsg.user_targetday===0"> <i class="iconfont">&#xe785;</i> 还没有制定背诵计划哦</div>
            <div class="planmsg error" v-else-if="timeOut===false"> 目标日为{{day(usermsg.user_targetday).format("YYYY-MM-DD")}} <i class="iconfont">&#xe77e;</i> 已超时！！！</div>
            <div class="planmsg" v-else>离制定的目标日还剩 <span>{{remainingDay}}</span> ， 建议接下来每天背诵 <span>{{suggestion}}</span> 课</div>
            <div class="makeplan" v-show="usermsg.user_day===null" @click="makePlan()">制定计划 <i class="iconfont">&#xe62f;</i></div>
        </div>
        <!-- 得分 -->
        <div class="scores">
          <!-- 计分框 使用echart实现 -->
          <div id="echartsBar" style="width:200px; height:16px;"></div>
          <div class="scoresitem">
            {{ usermsg.user_scores }} / {{ listmsg.wordnum * 3}} 已完成 {{ Progress }} %
            （ps：一个单词三分）
          </div>
        </div>
      </div>
    </div>
    <!-- 分割虚线 -->
    <div class="line"></div>
    <!-- 单词选择框 -->
    <div class="tips">tips:满分通关一个模块，就可以点亮一个模块的星星</div>
    <div class="wordForm">
      <div>
      <!-- routerlink携带参数说明，单词表，第几课，是否为最后一课，参数1为最后一课，参数0不为最后一课 -->
      <!-- 当单词总数能被20整除时，不渲染最后一课，反之 -->
      <RouterLink class="wordItem"
      v-for="n in itemNum"
      @click="changeStar(n-1)"
      :to="{path: 'courses', query: {name: this.name ,index:n}}"
      :key="n">
        <div class="wordItem-header">第{{n}}课</div>
        <div class="wordItem-son">20个单词</div>
        <div class="showStar">
          <i class="iconfont fullstar" v-if="mateScore[n-1]===1">&#xe86a;</i>
          <i class="iconfont star" v-else>&#xe7e0;</i>
          <i class="iconfont fullstar" v-if="writeScore[n-1]===1">&#xe86a;</i>
          <i class="iconfont star" v-else>&#xe7e0;</i>
          <i class="iconfont fullstar" v-if="dictationScore[n-1]===1">&#xe86a;</i>
          <i class="iconfont star" v-else>&#xe7e0;</i>
        </div>
      </RouterLink>
      <!-- 特殊的最后一课 跳转时-->
      <RouterLink
      @click="changeStar(itemNum)"
      :to="{path: 'courses', query: {name: this.name ,index:itemNum + 1}}"
      v-if="listmsg.wordnum%20!==0"
      class="wordItem">
        <div class="wordItem-header">第{{itemNum + 1}}课</div>
        <div class="wordItem-son">{{listmsg.wordnum%20}}个单词</div>
        <div class="showStar">
          <i class="iconfont fullstar" v-if="mateScore[itemNum]===1">&#xe86a;</i>
          <i class="iconfont star" v-else>&#xe7e0;</i>
          <i class="iconfont fullstar" v-if="writeScore[itemNum]===1">&#xe86a;</i>
          <i class="iconfont star" v-else>&#xe7e0;</i>
          <i class="iconfont fullstar" v-if="dictationScore[itemNum]===1">&#xe86a;</i>
          <i class="iconfont star" v-else>&#xe7e0;</i>
        </div>
      </RouterLink>

      </div>
  </div>
  </div>

<!-- 弹出计划选择框 -->
<Dialog
class="dialog"
:show= showDialog
@confirm="confirm"
@cancel="cancel"
:showCancel="true"
:title="'修改计划'" :confirmText="`提交`" :cancelText="`关闭`">
<!-- 修改日期计划 -->
  <div class="datepicker">
    计划背完时间：{{ day(usermsg.user_targetday).format('YYYY-MM-DD') }}
    <Datepicker
    v-model="selectedDate"
    position="center"
    :disabled-start-date="disabledStartDate"
    lang="ch"/>
  </div>
</Dialog>
</template>
<script>
// 调用修改用户计划日的接口
import { editUserPlan } from '@/api/worduser'
// 引入封装的弹窗组件
import Dialog from '@/components/library/dialog.vue'
import { initScore, getStart } from '@/api/courses'
import { getWordCours } from '@/api/home'
// 日期弹窗组件
import 'vue-datepicker-ui/lib/vuedatepickerui.css'
import VueDatepickerUi from 'vue-datepicker-ui'
// 引入echarts组件
import * as echarts from 'echarts'
// 引入封装好的计算时间的模块
import { intervalTime, onlyDay } from '@/utils/daysApart'
export default {
  name: 'word-form',
  components: {
    Dialog,
    Datepicker: VueDatepickerUi
  },
  data () {
    return {
      name: '',
      listmsg: '',
      // 用户对于该词表的信息
      usermsg: { user_day: null, user_targetday: 0, user_scores: 0 },
      profile: null,
      daynow: new Date(new Date().getTime()),
      selectedDate: new Date(new Date().getTime()),
      // 规定用户可以选则的日期为从今天起的以后
      disabledStartDate: {
        to: new Date(new Date().getTime()),
        from: new Date('12.31.2099')
      },
      // 控制日期选择框
      showDialog: false,
      // 背诵进度条数据
      chart: null,
      // 渲染课程选项 能被20除尽时创造最后一课
      itemNum: 0,
      // 背诵进度
      // Progress: 0
      mateScore: [],
      dictationScore: [],
      writeScore: []
    }
  },
  computed: {
    // 背诵进度
    Progress () {
      return Math.round(this.usermsg.user_scores / (this.listmsg.wordnum * 3) * 10000) / 100// 一个单词三分
    },
    // 用户设计的目标日，与今天还差多少天
    remainingDay () {
      return intervalTime(this.daynow, this.usermsg.user_targetday)
    },
    // 根据时间戳对比是否已经超时设置ture false true为未超时 false为超时
    timeOut () {
      if (this.daynow - (3600 * 24 * 1000) > this.usermsg.user_targetday) {
        return false
      } else {
        return true
      }
    },
    // 建议一天背诵课数
    suggestion () {
      if (this.listmsg.coursenum / onlyDay(this.daynow, this.usermsg.user_targetday) > 1) {
        return Math.ceil(this.listmsg.coursenum / onlyDay(this.daynow, this.usermsg.user_targetday))
      } else {
        return 1
      }
    }
  },
  methods: {
    makePlan () {
      // 打开计划框
      this.showDialog = true
    },
    confirm (show) {
      // console.log('触发了确认')
      // 提交设定的计划
      this.showDialog = show
      // 转化选定时间为时间戳
      // this.usermsg.user_targetday = this.selectedDate
      // console.log(this.selectedDate.getTime())
      editUserPlan({ targetDay: this.selectedDate.getTime() }, this.$route.query).then(res => {
        console.log(res.data)
        // 修改页面的usermsg
        this.usermsg.user_targetday = this.selectedDate.getTime()
      })
      // console.log(this.usermsg.user_day)
    },
    cancel (show) {
      // console.log('触发了取消')
      // 关闭计划框
      this.showDialog = show
    },
    // 初始化进度条
    echartsBarInit (progress) {
      this.chart = echarts.init(document.getElementById('echartsBar'))// 初始化echarts实例

      this.chart.setOption(// 通过setOption来生成柱状图
        {
          grid: { // 直角坐标系内绘图网格
            left: '0', // grid 组件离容器左侧的距离,
            // left的值可以是80这样具体像素值，
            // 也可以是'80%'这样相对于容器高度的百分比
            top: '0',
            right: '0',
            bottom: '0',
            containLabel: true // gid区域是否包含坐标轴的刻度标签。为true的时候，
            // left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
            // 所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
          },
          xAxis: { // 直角坐标系grid中的x轴,
            // 一般情况下单个grid组件最多只能放上下两个x轴,
            // 多于两个x轴需要通过配置offset属性防止同个位置多个x轴的重叠。
            type: 'value', // 坐标轴类型,分别有：
            // 'value'-数值轴；'category'-类目轴;
            // 'time'-时间轴;'log'-对数轴
            splitLine: { show: false }, // 坐标轴在 grid 区域中的分隔线
            axisLabel: { show: false }, // 坐标轴刻度标签
            axisTick: { show: false }, // 坐标轴刻度
            axisLine: { show: false }// 坐标轴轴线
          },
          yAxis: {
            type: 'category',
            axisTick: { show: false },
            axisLine: { show: false },
            axisLabel: {
              color: 'black',
              fontSize: 12
            },
            data: ['背诵进度:']// 类目数据，在类目轴（type: 'category'）中有效。
            // 如果没有设置 type，但是设置了axis.data,则认为type 是 'category'。
          },
          series: [// 系列列表。每个系列通过 type 决定自己的图表类型
            {
              name: '%', // 系列名称
              type: 'bar', // 柱状、条形图
              barWidth: 19, // 柱条的宽度,默认自适应
              data: [progress], // 系列中数据内容数组
              label: { // 图形上的文本标签
                show: false,
                offset: [0, 0], // 标签文字的偏移，此处表示向上偏移40
                formatter: '{c}{a}', // 标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值
                color: 'black', // 标签字体颜色
                fontSize: 8 // 标签字号
              },
              itemStyle: { // 图形样式
                normal: { // normal 图形在默认状态下的样式;
                  // emphasis图形在高亮状态下的样式
                  barBorderRadius: 10, // 柱条圆角半径,单位px.
                  // 此处统一设置4个角的圆角大小;
                  // 也可以分开设置[10,10,10,10]顺时针左上、右上、右下、左下
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [{
                      offset: 0,
                      color: '#22B6ED'// 柱图渐变色起点颜色
                    },
                    {
                      offset: 1,
                      color: '#3FE279'// 柱图渐变色终点颜色
                    }
                    ]
                  )
                }
              },
              zlevel: 1// 柱状图所有图形的 zlevel 值,
              // zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
            },
            {
              name: '进度条背景',
              type: 'bar',
              barGap: '-100%', // 不同系列的柱间距离，为百分比。
              // 在同一坐标系上，此属性会被多个 'bar' 系列共享。
              // 此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效，
              // 并且是对此坐标系中所有 'bar' 系列生效。
              barWidth: 20,
              data: [100],
              color: '#e0e0e0', // 柱条颜色
              itemStyle: {
                normal: {
                  barBorderRadius: 10
                }
              }
            }
          ]
        }
      )
    },
    // 返回上一页
    prev () {
      this.$router.go(-1)
    },
    // 存储某一词表单词某一课的答题情况
    changeStar (num) {
      const startmsg = {
        mateScore: this.mateScore[num],
        dictationScore: this.dictationScore[num],
        writeScore: this.writeScore[num]
      }
      this.$store.commit('courses/setStarmsg', startmsg)
    }
  },
  created () {
    // 获取用户信息
    this.profile = this.$store.state.user.profile
    // 拼凑出user字段 从而完成取值
    const u = 'user'
    const user = `${u}_${this.profile.id}`
    this.name = this.$route.query.name
    // 根据页面携带的query和token的id获取专属的单词背诵页面
    getWordCours(this.$route.query).then(async res => {
      console.log(res.data)
      this.listmsg = res.data.listmsg
      // json数据格式还需要进行一波转化 添加异步请求
      this.usermsg = JSON.parse(res.data.usermsg[user])
      // 记录最后一次所背单词
      this.$store.commit('user/editLastword', this.listmsg.titlename)
      // 生成echarts表 求出进度后生成进度条
      const progress = Math.round(this.usermsg.user_scores / (this.listmsg.wordnum * 3) * 10000) / 100
      this.echartsBarInit(progress)
      if (this.listmsg.wordnum % 20 !== 0) {
        this.itemNum = Math.ceil(this.listmsg.wordnum / 20) - 1
      } else {
        this.itemNum = this.listmsg.wordnum / 20
      }
    })

    const val = null
    // 初始化成绩字段 记录最后一次背诵的词表
    initScore({ data: val }, this.$route.query).then(res => {
      // console.log(res.data.status)
      // 获取用户这一课的得分情况 考虑到第一次初始化会 报错得留一些时间给数据库写入数据
      if (res.data.status === 0) {
        getStart(this.$route.query).then(res => {
        // console.log(res.data)
        // console.log(res.data.dictationScore)
          this.mateScore = res.data.mateScore
          this.dictationScore = res.data.dictationScore
          this.writeScore = res.data.writeScore
        })
      }
    })
  },
  mounted () {
    // 生成echarts表
    this.$nextTick(function () {

    })
  }
}
</script>
<style scoped lang="less">
.form{
  background: white;
  margin: 0 auto;
  height: 600px;
  width: 800px;
  border-radius: 1%;
  .title{
    color: #666;
    width: 800px;
    height: 40px;
    line-height: 40px;
    padding-left: 40px;
    border-bottom:1px solid rgb(198, 197, 197) ;
    span{
      color: #3a3a3a;
      font-family:'钉钉进步体';
    }
    //已完成
    .congratulations{
      font-family: '钉钉进步体';
      float:right;
      margin-right:8px;
      color:rgb(123, 220, 90);
      .iconfont{
        font-size: 30px;
      }
    }
  }
  .Header{
    border-radius:5px 5px 0px 0px;
    width: 800px;
    padding-left: 1px;
    padding-right: 1px;
    height: 40px;
    background-color: #3e87e5;
    .icon{
      position: relative;
      padding-left: 40px;
      height: 40px;
      float: left;
      line-height: 40px;
      font-size: 16px;
      img{
        height: 24px;
        position: absolute;
        left:10px;
        top: 8px;
      }
      span{
        color: white;
        font-weight: 100;
        font-family:'宋体';
      }
    }
    .iconfont{
      font-size: 24px;
    }
    .floatR{
      line-height: 40px;
      width: 40px;
      height: 40px;
      cursor: pointer;
      margin-right:16px ;
      float: right;
      color: white;
      &:hover{
        .iconfont{
          font-size: 30px;
        }
      }
    }
  }
}

.prompt {
  box-shadow: 3px 1px 1px 1px #666;
  width: 780px;
  height:60px;
  border-radius: 5px;
  background-color: #efecec;
  position: relative;
  top: 8px;
  margin-left:10px ;
  .message{
    margin-left: 25px;
    position: relative;
    top: 8px;
    width: 680px;
    height:40px;
    span{
      font-weight: 600;
      font-family: '钉钉进步体';
    }
    //计划样式
    .plan{
      font-size: 12px;
      width: 680px;
      display: flex;
      flex-direction: row;
      line-height: 24px;
      .warn{
        color: rgb(255, 186, 90);
      }
      .error{
        color: rgb(248, 17, 17);
      }
      .success{
        color: rgb(104, 204, 70);
        .iconfont{
          margin-right: 10px;
          position: absolute;
          font-size: 30px;
        }
        span{
          font-family:'微软雅黑';
          margin-left: 40px;
        }
      }
    }
    .planmsg{
      padding-right: 20px;
    }
    .makeplan{
      line-height: 24px;
      width: 80px;
      cursor: pointer;
      color: #3e87e5;
    }

    //得分样式
    .scores{
      display: flex;
      flex-direction: row;
      line-height: 16px;
      .scoresitem{
        margin-left: 5px;
        font-size: 12px;
      }
    }
  }
}
.prompt:before{
  width: 0px;
  height: 0px;
  content: "";
  border-top: 30px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 20px solid #efecec;
  position: absolute;
  top: 10px;
  left: -10px;
}
.line{
  margin: 15px;
  border: 1px dashed #ccc;
  height: 0;
  width: 770px;
}

.tips{
  position: relative;
  left: 25px;
  top: -8px;
  font-size: 10px;
  font-family: '钉钉进步体';
  color: #666;
}
.wordForm{
    border:1px solid #bab9b9;
    height: 400px;
    width: 780px;
    overflow-y: scroll;
    position: relative;
    text-align: center;
    left: 10px;
    top:0px;
    .wordItem{
      float: left;
      width: 160px;
      height: 100px;
      background-color: rgba(99, 203, 238,0.1);
      border:1px solid rgba(99, 203, 238,0.8);
      border-radius: 2%;
      margin: 15px;
      &:hover{
        cursor: pointer;
        box-shadow: 3px 1px 1px 1px #3e87e5;
      }
      .wordItem-header{
        font-size: 16px;
        color: #3e87e5;
        margin: 5px;
      }
      .wordItem-son{
        margin: 10px;
        font-size: 12px;
        color: #91baef;
      }
      .showStar{
        .star{
          color: #3e87e5;
        }
        .fullstar{
          color: rgba(255, 174, 0, 0.893);
        }
      }
    }
}

.datepicker{

  margin: 0 auto;
  width: 200px;
}
</style>
